<template>
  <view>
    <view class="container">
      <u-navbar title="我的消息" :autoBack="true" />
      <!-- 添加一个与导航栏高度相同的上边距 -->
      <view class="content" :style="{ marginTop: navbarHeight + 'px' }">
        <u-tabs
          :list="tabsList"
          @click="tabsClick"
          :scrollable="false"
        ></u-tabs>
        <u-empty
          mode="data"
          text="暂无数据"
          v-if="messageList.length == 0"
          marginTop="100%"
          :icon="getResource('img/phone/mini/no_data.png')"
        />

        <view class="message-list">
          <!-- 这里可以用 v-for 循环你的消息数据 -->
          <view
            class="message-item"
            v-for="(item, index) in messageList"
            :key="index"
          >
            <u-row
              class="message-row"
              :class="{ unread: item.read_is == 0, read: item.read_is == 1 }"
              @tap="aaa(item)"
            >
              <u-col span="2">
                <!-- 未读显示红点+图标，已读显示灰色图标 -->
                <view class="avatar-container">
                  <u-avatar
                    :src="
                      item.read_is == 0
                        ? '/static/ywdu/3.png'
                        : '/static/ywdu/3.png'
                    "
                    size="40"
                    :class="{ 'unread-avatar': item.read_is == 0 }"
                  ></u-avatar>
                  <view v-if="item.read_is == 0" class="unread-badge"></view>
                </view>
              </u-col>
              <u-col span="10">
                <view class="message-content">
                  <view class="message-title">
                    <text
                      class="title-text"
                      :class="{ 'unread-text': item.read_is == 0 }"
                      >{{ item.title }}</text
                    >
                    <text
                      class="time-text"
                      :class="{ 'unread-time': item.read_is == 0 }"
                      >{{ item.create_at_show }}</text
                    >
                  </view>
                  <view class="message-title" v-if="item.from_username">
                    <text class="title-text">{{ item.from_username }}</text>
                  </view>
                  <view
                    class="message-desc"
                    :class="{ 'unread-desc': item.read_is == 0 }"
                  >
                    {{ item.content }}
                  </view>
                </view>
              </u-col>
            </u-row>
          </view>

          <!-- 加载状态提示 -->
          <!-- 				<view class="loading-status">
					<u-loadmore :status="loadStatus" />
				</view> -->
        </view>
      </view>
    </view>
    <view style="margin: 40rpx auto" v-if="messageList.length != 0">
      <u-pagination
        v-model="currentPage"
        :total="total"
        :page-size="initialPageSize"
        @change="pageChange"
      ></u-pagination> </view
  ></view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
import { getResource } from "../../utils/Resource";
import { onShow } from "@dcloudio/uni-app";
const { proxy } = getCurrentInstance();

const tabsList = ref([
  {
    name: "消息",
    badge: {
      value: 0,
    },
  },
  {
    name: "私信",
    badge: {
      value: 0,
    },
  },
]);

// 导航栏高度，默认为44px（iOS标准），可以根据实际情况调整
const navbarHeight = ref(130);

// 消息列表数据
const messageList = ref([]);
// 加载状态：loadmore-加载前，loading-加载中，nomore-没有更多
const loadStatus = ref("loadmore");
// 当前页码
const currentPage = ref(1);
// 每页条数（首次加载10条，后续每次加载5条）
const initialPageSize = 8;
const subsequentPageSize = 5;
// 是否正在加载中（防止重复加载）
const isLoading = ref(false);
// 是否还有更多数据
const hasMore = ref(true);
const total = ref(0);

const pageChange = (e) => {
  console.log(e);
  currentPage.value = e;
  // getMessageList();
  tabsClick({ index: tabsIndex.value });
};
const tabsIndex = ref(0);
const tabsClick = async (e) => {
  tabsIndex.value = e.index;
  if (e.index == 1) {
    proxy
      .$http({
        url: `SiXin/index?page_size=${initialPageSize}&page_no=${currentPage.value}`,
      })
      .then((r) => {
        console.log(r.data.data);
        total.value = r.data.data.count;
        messageList.value = r.data.data.list;
        tabsList.value[1].badge.value = r.data.data.no_read;
      });
  } else {
    await getMessageList();
  }
};

const getMessageList = () => {
  proxy
    .$http({
      url: `notice/index?page_size=${initialPageSize}&page_no=${currentPage.value}`,
    })
    .then((r) => {
      console.log(r.data.data);
      total.value = r.data.data.count;
      messageList.value = r.data.data.list;
      tabsList.value[0].badge.value = r.data.data.no_read;
    });
};

onShow(() => {
  tabsClick({ index: tabsIndex.value });
});

const aaa = (e) => {
  uni.navigateTo({
    // url: "/pages/user/read_message?id=" + e.id,
    url: `/pages/user/read_message?id=${e.id}&type=${tabsIndex.value}`,
  });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 20rpx;
}

.content {
  /* 如果不想用JS计算高度，也可以直接使用CSS固定值 */
  /* margin-top: 44px; */
}

.message-list {
  margin-top: 20rpx;
}

.message-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.message-content {
  padding-left: 20rpx;
}

.message-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;

  .title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .time-text {
    font-size: 24rpx;
    color: #999;
  }
}

.message-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.loading-status {
  padding: 20rpx 0;
}

.message-row {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &.unread {
    background-color: #f9f9f9; // 未读项浅色背景
  }

  &.read {
    opacity: 0.8; // 已读项稍微透明
  }
}

.avatar-container {
  position: relative;
  width: 40px;
  height: 40px;

  .unread-avatar {
    border: 2rpx solid #ff5500; // 未读头像边框
  }

  .unread-badge {
    position: absolute;
    top: -4rpx;
    right: -4rpx;
    width: 16rpx;
    height: 16rpx;
    background-color: #ff5500;
    border-radius: 50%;
    border: 2rpx solid #fff;
  }
}

.message-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;

  .title-text {
    font-size: 32rpx;
    font-weight: bold;

    &.unread-text {
      color: #333; // 未读标题深色
      font-weight: bold;
    }
  }

  .time-text {
    font-size: 24rpx;

    &.unread-time {
      color: #ff5500; // 未读时间红色
    }
  }
}

.message-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;

  &.unread-desc {
    color: #333; // 未读内容深色
    font-weight: 500;
  }
}
</style>
